import React, {useEffect,useState, useRef} from "react";
import '../style/components/hour-weather-chart.scss'
import { useChart } from '../hooks/useCharts'

const HourWeatherChart = ({
  weather,
  isLoading,
  isError
}) => {
    const option = {
        animation: false,
        dataZoom: [{
          type: 'inside',
          xAxisIndex: 0,
          zoomLock: true,
          moveOnMouseMove: true,
          preventDefaultMouseMove: false,
          zoomOnMouseWheel: false,
          startValue: 1, //数据窗口范围的起始数值
          endValue: 4,
        }],
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: false  
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                align: 'left',
                fontSize: 14,
                color: 'rgba(51, 40, 33, 0.5)',
              },
            data: weather.xData
        },
        yAxis: {
            show: false,
            min(value) {
                return value.min - 5
            },
            max(value) {
                return value.max + 2
            }
        },
        grid: {
            left: '0%',
            right: '5%',
            top: '0%',
            bottom: '22%',
        },
        series: [{
            type: 'line',
            data: weather.yData,
            smooth: true,
            symbol: 'none',
            itemStyle: {
                color: '#E9C939'
            },
            areaStyle: {
                color: 'rgba(233, 201, 57, 0.25)',
            }
        }]
    }
    const [chartsOption, updateChartsOptions] = useState(option)
    useEffect(() => {
        updateChartsOptions(option)
        console.log('更新option',chartsOption , 'is===', chartsOption === option )
    }, [weather]);
    const chartRef = useRef(null)

    useChart(chartRef, chartsOption)
  
  return (<div className='hour-chart'>
       <div ref={chartRef} style={{ width: '100%', height: '110px' }}></div>
  </div>);
};

export default HourWeatherChart;
